<template>
  <div>
    <!-- 导航区 -->
    <ul class="nav nav-tabs">
      <li>
        <router-link
          replace
          to="/home/news"
          active-class="active"
          class="list-group-item"
          >News</router-link
        >
      </li>
      <li>
        <router-link
          :to="{ name: 'xiaoxi' }"
          active-class="active"
          class="list-group-item"
          >Message</router-link
        >
      </li>
    </ul>
    <!-- 展示区 -->
    <div class="panel panel-body panel-primary">
      <!-- 第一种写法,包含第一个 -->
      <!-- <keep-alive include="News"> -->
      <!-- 第二种写法,数组的写法,包含多个 -->
      <keep-alive :include="['News', 'Message']">
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style scoped>
h2 {
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
</style>